import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import {
  getBanners,
  getHotRecommends,
  getNewAlbums,
  getRanking,
  getResidentSingers,
  getTopAnchors,
} from '../service/recommended';
interface IState {
  banners: any[];
  HotRecommends: any[];
  newAlbums: any[];
  ranking: any[];
  residentSingers: any[];
  topAnchors: any[];
}
const initialState: IState = {
  banners: [],
  HotRecommends: [],
  newAlbums: [],
  ranking: [],
  residentSingers: [],
  topAnchors: [],
};

export const fetchBanners = createAsyncThunk('recommended/banners', async () => {
  const response: any = await getBanners();
  return response.banners;
});
export const fetchHotRecommends = createAsyncThunk('recommended/Hot', async () => {
  const response: any = await getHotRecommends(8);
  return response.result;
});
export const fetchNewAlbums = createAsyncThunk('recommended/Albums', async () => {
  const response: any = await getNewAlbums();
  return response.albums;
});
export const fetchResidentSingers = createAsyncThunk('recommended/residentSingers', async () => {
  const response: any = await getResidentSingers();
  return response.artists;
});
export const fetchTopAnchors = createAsyncThunk('recommended/topAnchors', async () => {
  const response: any = await getTopAnchors(5);
  return response.data.list;
});
/*
"name": "飙升榜", "id": 19723756,
"name": "新歌榜","id": 3779629,
"name": "原创榜", "id": 2884035,
*/
const rankArr = [19723756, 3779629, 2884035];
export const fetchRangking = createAsyncThunk('recommended/ranking', async () => {
  const promiseArr = rankArr.map((item) => getRanking(item));
  const res = await Promise.all(promiseArr);
  return res.map((response: any) => response.playlist);
});
const recommendedSlice = createSlice({
  name: 'recommended',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    // banner
    // 处理请求开始状态
    builder.addCase(fetchBanners.pending, (state) => {
      // console.log('pending');
    });
    // 处理请求成功状态
    builder.addCase(fetchBanners.fulfilled, (state, action) => {
      state.banners = action.payload;
    });
    // 处理请求失败状态
    builder.addCase(fetchBanners.rejected, (state, action) => {
      // console.log('rejected');
    });

    // HotRecommended
    // 处理请求开始状态
    builder.addCase(fetchHotRecommends.pending, (state) => {
      // console.log('pending');
    });
    // 处理请求成功状态
    builder.addCase(fetchHotRecommends.fulfilled, (state, action) => {
      state.HotRecommends = action.payload;
    });
    // 处理请求失败状态
    builder.addCase(fetchHotRecommends.rejected, (state, action) => {
      // console.log('rejected');
    });

    // Albums
    // 处理请求开始状态
    builder.addCase(fetchNewAlbums.pending, (state) => {
      // console.log('pending');
    });
    // 处理请求成功状态
    builder.addCase(fetchNewAlbums.fulfilled, (state, action) => {
      state.newAlbums = action.payload;
    });
    // 处理请求失败状态
    builder.addCase(fetchNewAlbums.rejected, (state, action) => {
      // console.log('rejected');
    });

    // ranking
    // 处理请求开始状态
    builder.addCase(fetchRangking.pending, (state) => {
      // console.log('pending');
    });
    // 处理请求成功状态
    builder.addCase(fetchRangking.fulfilled, (state, action) => {
      state.ranking = action.payload;
    });
    // 处理请求失败状态
    builder.addCase(fetchRangking.rejected, (state, action) => {
      // console.log('rejected');
    });

    // residentSingers
    // 处理请求开始状态
    builder.addCase(fetchResidentSingers.pending, (state) => {
      // console.log('pending');
    });
    // 处理请求成功状态
    builder.addCase(fetchResidentSingers.fulfilled, (state, action) => {
      state.residentSingers = action.payload;
    });
    // 处理请求失败状态
    builder.addCase(fetchResidentSingers.rejected, (state, action) => {
      // console.log('rejected');
    });

    // topAnchors
    // 处理请求开始状态
    builder.addCase(fetchTopAnchors.pending, (state) => {
      // console.log('pending');
    });
    // 处理请求成功状态
    builder.addCase(fetchTopAnchors.fulfilled, (state, action) => {
      state.topAnchors = action.payload;
    });
    // 处理请求失败状态
    builder.addCase(fetchTopAnchors.rejected, (state, action) => {
      // console.log('rejected');
    });
  },
});

export default recommendedSlice.reducer;
